{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }
    </style>
{% endblock %}

{% block right_content %}
    <div class="headline">
        <div class="tab_top top_tag"><a href="vehicle_use_info_view">车辆使用</a></div>
        <div class="tab_top"><a href="vehicle_person_apply">我的申请</a></div>
        <div style="width: 10%;line-height: 40px;float: right;text-align: right;padding-right: 1%;">
            <a href="vehicle_apply_index">
                <button style="height: 30px;width: 70%;border-radius: 3px;" id="add_station" type="button"
                        class="btn btn-default add-station">预订
                </button>
            </a>
        </div>
    </div>
{#    <div class="headline">#}
{#        <div id="dispatch_detail_tab" onclick="change_mind('jurisdiction_list')" class="tab_top top_tag">#}
{#            车辆使用#}
{#        </div>#}
{#        <div id="document_addressee_details_tab" onclick="change_mind('add_jurisdiction')" class="tab_top">#}
{#            我的申请#}
{#        </div>#}
{##}
{#        <div style="width: 10%;line-height: 40px;float: right;">#}
{#            <a href="vehicle_apply_index">#}
{#                <button style="height: 30px;width: 70%;" id="add_station" type="button"#}
{#                        class="btn btn-default add-station">预订#}
{#                </button>#}
{#            </a>#}
{#        </div>#}
{#    </div>#}

    <div id="add_jurisdiction" style="width: 100%;height: 95.3%;overflow: auto;background-color: white;">
        <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
            <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                <section class="grid-main" style="height: 100%;">
                    <table id="main_table"></table>
                </section>
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/administrative/js/layer.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
        };


        const gridManagerName = "test",
            TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
            arg = {
                gridManagerName: "test",
                width: "100%",
                height: "100%",
                autoOrderConfig: {fixed: "left"},
                checkboxConfig: {key: "id", fixed: "left"},
                supportAjaxPage: !0,
                sortMode: "single",
                supportMenu: !0,
                menuHandler: e => (e.unshift({
                    content: "自定义菜单", line: !0, onClick: e => {
                        alert(e)
                    }
                }), e),
                useCellFocus: !0,
                useHideRow: !0,
                supportMoveRow: !0,
                moveRowConfig: {
                    key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                        console.log(e, t)
                    }
                },
                disableCache: !1,
                ajaxData: function (e, t) {
                    var local_host = window.location.host;          // 获取当前IP
                    return "/personal-center/vehicle_person_apply"
                },
                exportConfig: {
                    fileName: e => {
                        const t = new Date;
                        let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                        for (let t in e) a = `${a}-${t}=${e[t]}`;
                        return a
                    }, suffix: "xls"
                },
                ajaxType: "POST",
                responseHandler: e => (e.data.forEach((e => {
                    e.priority = e.id
                })), e),
                rowRenderHandler: (e, t) => e,
                emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
                columnData: [
                    {
                        key: "registration_number",
                        text: "车牌号",
                        align: "center",
                    }, {
                        key: "driver",
                        text: "司机",
                        align: "center",
                    }, {
                        key: "seat",
                        text: "座位",
                        align: "center",
                    },
                    {
                        key: "start_time",
                        text: "开始时间",
                        align: "center",
                    },{
                        key: "end_time",
                        text: "结束时间",
                        align: "center",
                    },
                    {#{#}
                    {#    key: "action",#}
                    {#    width: "100px",#}
                    {#    align: "center",#}
                    {#    fixed: "right",#}
                    {#    disableMoveRow: !0,#}
                    {#    disableRowCheck: !0,#}
                    {#    text: '<span style="color: red">操作</span>',#}
                    {#    template: (e, t) => `<a class="plugin-action" id="${t.id}" href="product_adopt_detail_view?id=${t.id}" onclick="">查看</a>`#}
                    {# }#}
                    ]
            }, demo1 = {
                initSearch: function () {
                }, initFN: () => {

                }, initGM: function () {
                    new window.GridManager(table, arg, (e => {
                        console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                    }))
                }, editRowData: function (e) {
                    window.GridManager.updateRowData("test", "id", {
                        id: window.parseInt(e.getAttribute("data-id")),
                        lastDate: (new Date).getTime()
                    })
                }
            }, table = document.querySelector("#main_table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();


        {#function change_mind(ele_id) {#}
        {#    if (ele_id === "jurisdiction_list") {#}
        {#        document.getElementById("jurisdiction_list").style.display = "inline-block";#}
        {#        document.getElementById("add_jurisdiction").style.display = "none";#}
        {#        document.getElementById("dispatch_detail_tab").className = "tab_top top_tag";#}
        {#        document.getElementById("document_addressee_details_tab").className = "tab_top";#}
        {#    } else {#}
        {#        document.getElementById("add_jurisdiction").style.display = "inline-block";#}
        {#        document.getElementById("jurisdiction_list").style.display = "none";#}
        {#        document.getElementById("dispatch_detail_tab").className = "tab_top";#}
        {#        document.getElementById("document_addressee_details_tab").className = "tab_top top_tag";#}
        {#        var e = {#}
        {#            tab: 'apply'#}
        {#        };#}
        {#        table.GM("setQuery", e, (function () {#}
        {#            console.log("setQuery执行成功")#}
        {#        }))#}
        {#    }#}
        {# }#}

        {#function create_my_apply(my_apply_list) {#}
        {#    if (!my_apply_list.length){#}
        {#        document.getElementById("img-display1").style.display="inline-block";#}
        {#    }#}
        {#    var t_table1 = document.getElementById("t_table1");#}
        {#    for (var i=0; i<my_apply_list.length; i++){#}
        {#        var state = "";#}
        {#        var tr = document.createElement("tr");#}
        {#        if (my_apply_list[i]["state"] === "申请中" || my_apply_list[i]["state"] === "分管领导已审批" || my_apply_list[i]["state"] === "车队领导已审批"){#}
        {#            state = "审批中";tr.style.color="red";#}
        {#        }else if (my_apply_list[i]["state"] === "车管办分管领导已审批"){#}
        {#            state = "完成";#}
        {#        }else if (my_apply_list[i]["state"] === "作废"){#}
        {#            state = "作废";#}
        {#        }#}
        {#        else {#}
        {#            state = "拒绝";tr.style.color="#00CD66";#}
        {#        }#}
        {##}
        {#        var td = document.createElement("td");#}
        {#        var td1 = document.createElement("td");#}
        {#        var td2 = document.createElement("td");#}
        {#        var td3 = document.createElement("td");#}
        {#        var td4 = document.createElement("td");#}
        {#        var td5 = document.createElement("td");#}
        {#        var td6 = document.createElement("td");#}
        {#        var td7 = document.createElement("td");#}
        {#        td.innerHTML = my_apply_list[i]["apply_user"];#}
        {#        td.style.textAlign = "center";#}
        {#        td1.innerHTML = my_apply_list[i]["start_time"];#}
        {#        td1.style.textAlign = "center";#}
        {#        td2.innerHTML = my_apply_list[i]["end_time"];#}
        {#        td2.style.textAlign = "center";#}
        {#        td3.innerHTML = my_apply_list[i]["subject"];#}
        {#        td3.style.textAlign = "center";#}
        {#        td4.innerHTML = my_apply_list[i]["route"];#}
        {#        td4.style.textAlign = "center";#}
        {#        td5.innerHTML = state;#}
        {#        td5.style.textAlign = "center";#}
        {#        if (my_apply_list[i]['state'] === "申请中" || my_apply_list[i]['state'] === "拒绝"){#}
        {#             td6.innerHTML = "<a href='Vehicle_apply_detail.html?type=ture&id=" + my_apply_list[i]["id"] + "'>查看</a> | <a style='color: dodgerblue;' href='#' onclick='do_cancel(" + my_apply_list[i]["id"] + ")'>作废</a>";#}
        {#        }#}
        {#        else {#}
        {#            td6.innerHTML = "<a href='Vehicle_apply_detail.html?type=ture&id=" + my_apply_list[i]["id"] + "'>查看</a>";#}
        {#        }#}
        {#          td6.style.textAlign = "center";#}
        {#        td7.innerHTML = my_apply_list[i]["current_audit_user"];#}
        {#        td7.style.textAlign = "center";#}
        {#        tr.appendChild(td);#}
        {#        tr.appendChild(td1);#}
        {#        tr.appendChild(td2);#}
        {#        tr.appendChild(td3);#}
        {#        tr.appendChild(td4);#}
        {#        tr.appendChild(td5);#}
        {#        tr.appendChild(td7);#}
        {#        tr.appendChild(td6);#}
        {#        t_table1.appendChild(tr);#}
        {#    }#}
        {# }#}

        {#function do_cancel(id) {#}
        {#    document.getElementById("loading").style.display = "inline-block";#}
        {#    var xhr = new XMLHttpRequest();#}
        {#    var local_host = window.location.host;          // 获取当前IP#}
        {#    xhr.open('post', "/personal-center/vehicle_apply_cancel_view");#}
        {#    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');#}
        {#    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');#}
        {#    xhr.send("id=" + id);#}
        {#    xhr.onreadystatechange = function () {#}
        {#        if (xhr.readyState === 4) {#}
        {#            if (xhr.status === 200) {#}
        {#                document.getElementById("loading").style.display = "none";#}
        {#                var JsonDate = JSON.parse(xhr.responseText);#}
        {#                if (JsonDate["code"] === 200) {#}
        {#                    alert("作废成功");#}
        {#                    location.reload();#}
                            {#window.location.href="/personal-center/topic_discussion.html";#}
        {#                } else {#}
        {#                    alert(JsonDate["message"]);#}
        {#                }#}
        {#            }#}
        {#        }#}
        {#    };#}
        {# }#}

        {#function create_vehicle(vehicle_use_info_list) {#}
        {#    if (!vehicle_use_info_list.length){#}
        {#        document.getElementById("img-display").style.display="inline-block";#}
        {#    }#}
        {#    var t_table = document.getElementById("t_table");#}
        {#    for (var j=0; j<vehicle_use_info_list.length; j++){#}
        {#        var tr1 = document.createElement("tr");#}
        {#        var td_0 = document.createElement("td");var td_1 = document.createElement("td");var td_2 = document.createElement("td");var td_3 = document.createElement("td");var td_4 = document.createElement("td");#}
        {#        td_0.innerHTML=vehicle_use_info_list[j]["registration_number"];td_0.style.textAlign="center";td_1.innerHTML=vehicle_use_info_list[j]["seat"];td_1.style.textAlign="center";td_2.innerHTML=vehicle_use_info_list[j]["driver"];td_2.style.textAlign="center";td_3.innerHTML=vehicle_use_info_list[j]["start_time"];td_3.style.textAlign="center";#}
        {#        td_4.innerHTML=vehicle_use_info_list[j]["end_time"];td_4.style.textAlign="center";#}
        {#        tr1.appendChild(td_0);tr1.appendChild(td_1);tr1.appendChild(td_2);tr1.appendChild(td_3);tr1.appendChild(td_4);t_table.appendChild(tr1);#}
        {#    }#}
        {# }#}
        {##}
        {#// 加载分页条#}
        {#function pagenum(dataTotals, page = 1) {#}
        {#    new myPagination({#}
        {#        id: 'pagination',#}
        {#        curPage: page, //初始页码#}
        {#        pageAmount: 20,  //每页多少条#}
        {#        dataTotal: dataTotals, //总共多少条数据#}
        {#        pageTotal: Math.ceil(parseInt(dataTotals, 10) / 20), //总页数#}
        {#        pageSize: 5, //可选,分页个数#}
        {#        showPageTotalFlag: true, //是否显示数据统计#}
        {#        showSkipInputFlag: true, //是否支持跳转#}
        {#        getPage: function (page) {#}
        {#            request_data(page, "1");#}
        {#        }#}
        {#    });#}
        {# }#}
        {##}
        {# // 加载分页条#}
        {#function pagenum1(dataTotals, page = 1) {#}
        {#    new myPagination1({#}
        {#        id: 'pagination1',#}
        {#        curPage: page, //初始页码#}
        {#        pageAmount: 20,  //每页多少条#}
        {#        dataTotal: dataTotals, //总共多少条数据#}
        {#        pageTotal: Math.ceil(parseInt(dataTotals, 10) / 20), //总页数#}
        {#        pageSize: 5, //可选,分页个数#}
        {#        showPageTotalFlag: true, //是否显示数据统计#}
        {#        showSkipInputFlag: true, //是否支持跳转#}
        {#        getPage: function (page) {#}
        {#            request_data(page, "2");#}
        {#        }#}
        {#    });#}
        {# }#}
        {##}
        {#function request_data(page, cuent_type) {#}
        {#    document.getElementById("loading").style.display = "inline-block";#}
        {#    var xhr = new XMLHttpRequest();#}
        {#    var local_host = window.location.host;          // 获取当前IP#}
        {#    xhr.open('get', "/personal-center/vehicle_use_info_view?page="+String(page)+"&search=1&cuent_type="+String(cuent_type), true);#}
        {#    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');#}
        {#    xhr.send();#}
        {#    xhr.onreadystatechange = function () {#}
        {#        if (xhr.readyState === 4) {#}
        {#            if (xhr.status === 200) {#}
        {#                document.getElementById("loading").style.display = "none";#}
        {#                var JsonDate = JSON.parse(xhr.responseText);#}
        {#                console.log(JsonDate)#}
        {#                if (cuent_type === "1"){#}
        {#                    create_vehicle(JsonDate["my_apply_list"]);#}
        {#                    pagenum(JsonDate["apply_data_count"], 1);#}
        {#                }#}
        {#                if (cuent_type === "2"){#}
        {#                    create_my_apply(JsonDate["vehicle_use_info_list"]);#}
        {#                    pagenum1(JsonDate["use_data_count"], page);#}
        {#                }#}
        {#            }#}
        {#        }#}
        {#    };#}
        {# }#}
        {##}
        {#var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题#}
        {#var table_tb_1 = document.getElementById("clsq_table");#}
        {#for (j = 0; j < table_tb_1.rows[0].cells.length; j++) {#}
        {#    table_tb_1.rows[0].cells[j].onmousedown = function () {#}
        {#        //记录单元格#}
        {#        tTD = this;#}
        {#        if (event.offsetX > tTD.offsetWidth - 10) {#}
        {#            tTD.mouseDown = true;#}
        {#            tTD.oldX = event.x;#}
        {#            tTD.oldWidth = tTD.offsetWidth;#}
        {#        }#}
        {#    };#}
        {#    table_tb_1.rows[0].cells[j].onmouseup = function () {#}
        {#        //结束宽度调整#}
        {#        if (tTD === undefined) tTD = this;#}
        {#        tTD.mouseDown = false;#}
        {#        tTD.style.cursor = 'default';#}
        {#    };#}
        {#    table_tb_1.rows[0].cells[j].onmousemove = function () {#}
        {#        //更改鼠标样式#}
        {#        if (event.offsetX > this.offsetWidth - 10)#}
        {#            this.style.cursor = 'col-resize';#}
        {#        else#}
        {#            this.style.cursor = 'default';#}
        {#        //取出暂存的table_tb_1 Cell#}
        {#        if (tTD === undefined) tTD = this;#}
        {#        //调整宽度#}
        {#        if (tTD.mouseDown != null && tTD.mouseDown === true) {#}
        {#            tTD.style.cursor = 'default';#}
        {#            if (tTD.oldWidth + (event.x - tTD.oldX) > 0)#}
        {#                tTD.width = tTD.oldWidth + (event.x - tTD.oldX);#}
        {#            //调整列宽#}
        {#            tTD.style.width = tTD.width;#}
        {#            tTD.style.cursor = 'col-resize';#}
        {#            //调整该列中的每个Cell#}
        {#            table_tb_1 = tTD;#}
        {#            while (table_tb_1.tagName !== 'TABLE') table_tb_1 = table_tb_1.parentElement;#}
        {#            for (j = 0; j < table_tb_1.rows.length; j++) {#}
        {#                table_tb_1.rows[j].cells[tTD.cellIndex].width = tTD.width;#}
        {#            }#}
        {#        }#}
        {#    };#}
        {# }#}

        {#var tTD_wei; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题#}
        {#var table_tb_wei = document.getElementById("clsy_table");#}
        {#for (j = 0; j < table_tb_wei.rows[0].cells.length; j++) {#}
        {#    table_tb_wei.rows[0].cells[j].onmousedown = function () {#}
        {#        //记录单元格#}
        {#        tTD_wei = this;#}
        {#        if (event.offsetX > tTD_wei.offsetWidth - 10) {#}
        {#            tTD_wei.mouseDown = true;#}
        {#            tTD_wei.oldX = event.x;#}
        {#            tTD_wei.oldWidth = tTD_wei.offsetWidth;#}
        {#        }#}
        {#    };#}
        {#    table_tb_wei.rows[0].cells[j].onmouseup = function () {#}
        {#        //结束宽度调整#}
        {#        if (tTD_wei === undefined) tTD_wei = this;#}
        {#        tTD_wei.mouseDown = false;#}
        {#        tTD_wei.style.cursor = 'default';#}
        {#    };#}
        {#    table_tb_wei.rows[0].cells[j].onmousemove = function () {#}
        {#        //更改鼠标样式#}
        {#        if (event.offsetX > this.offsetWidth - 10)#}
        {#            this.style.cursor = 'col-resize';#}
        {#        else#}
        {#            this.style.cursor = 'default';#}
        {#        //取出暂存的table_tb_wei Cell#}
        {#        if (tTD_wei == undefined) tTD_wei = this;#}
        {#        //调整宽度#}
        {#        if (tTD_wei.mouseDown != null && tTD_wei.mouseDown == true) {#}
        {#            tTD_wei.style.cursor = 'default';#}
        {#            if (tTD_wei.oldWidth + (event.x - tTD_wei.oldX) > 0)#}
        {#                tTD_wei.width = tTD_wei.oldWidth + (event.x - tTD_wei.oldX);#}
        {#            //调整列宽#}
        {#            tTD_wei.style.width = tTD_wei.width;#}
        {#            tTD_wei.style.cursor = 'col-resize';#}
        {#            //调整该列中的每个Cell#}
        {#            table_tb_wei = tTD_wei;#}
        {#            while (table_tb_wei.tagName != 'TABLE') table_tb_wei = table_tb_wei.parentElement;#}
        {#            for (j = 0; j < table_tb_wei.rows.length; j++) {#}
        {#                table_tb_wei.rows[j].cells[tTD_wei.cellIndex].width = tTD_wei.width;#}
        {#            }#}
        {#        }#}
        {#    };#}
        {# }#}
    </script>
{% endblock %}
